<template> 
    <a-row  class='main'> 
    	<!-- 共5条数据 -->
    	<!-- <breadcrumbs  :route='$route'></breadcrumbs> --> 
    	<div  class='minorNav'  v-if='$route.path == "/property"'> 
				<span  v-for='(item,index)  in minorNavdata '  :key='index'  :class='{active:currentIndex==index}'  @click='chooseNav(index)'>{{item.title}}</span> 
	    </div>
	    <a-spin   :indicator="indicator"  tip="正在加载中..."  :spinning='spinning'  :delay="delayTime">
			<ul  class='mb40'  style="min-height: 195px;">
				<li  v-for='item in data' class='mt28'>
					<div  class='property_content'>
						<a-row  >
			      			<a-col class="inline-title ft16   color-white" :span="4" >
			      				<span>{{item.name}}</span>
			      			</a-col>
			      			<a-col class="gutter-row" :span="4" >
			      				<span  class='color-666'>规模(万元) </span><br /><br />
			      				<span  class='color-minor  ft22'>{{item.prjSize}}</span> 
			      			</a-col> 
			      			<a-col class="gutter-row" :span="4" >
			      				<span  class='color-666'>资产类型</span><br /><br />
			      				<span  class='color-main  ft18'>{{item.type | propertyType}}</span> 
			      			</a-col>
			      			<a-col class="gutter-row" :span="5" >
			      				<span  class='color-666'>发行方</span><br /><br />
			      				<span  class='ft16'>{{item.issuer}}</span> 
			      			</a-col>
			      			<a-col class="gutter-row" :span="3" >
			      				<span  class='color-666'>存续周期</span><br /><br />
			      				<span  class='ft16'>{{item.subsistingCycle}}个月</span> 
			      			</a-col>
			      			<a-col class="gutter-row  lh68" :span="4" style='border-right:none;'>
			      				<a-button   ghost   style='background-color: #fff;color:#FF9203;border-color:#FF9203'><router-link :to='{path:"/property/detail",query:{code:item.code}}'>查看详情</router-link></a-button>
			      			</a-col>
			      		</a-row>
					</div>
					 
				</li>
			</ul>
			<a-divider  v-if='totalNum>=10'>
				<a-button type="link"  @click='nextPage()'  v-if='hasNext==true'>点击加载更多</a-button>
				<span  v-if='hasNext==false'  class='ft14'>加载完毕</span>
			</a-divider>
		</a-spin>
	</a-row>  
</template>

<script >
import  {  getPropertyList }  from '@/api/home/property'

import breadcrumbs  from '@/components/common/breadcrumbs'
export default {
  name: 'propertyAdd',
  data () {
  	return { 
  		spinning:false,
    	indicator:<a-icon type="loading-3-quarters"  spin  style="{ fontSize: '16px' , color :'#1e49a5' }"/> ,
    	delayTime:500,

  		data:[],
  		search:{
  			pageSize:10,
  			pageNo:1,
  			type:''
  		},
  		currentIndex:4,
	    minorNavdata:[
	        {title:'定向融资类'},
	        {title:'商票资产类'},
	        {title:'应收账款类'},
	        {title:'其他类'},
	        {title:'全部'},
	    ],
	    hasNext:true,
		totalNum:null,
  	}
  },
  created(){
  	this.pageInit()
  },
  methods:{
  	pageInit(){
  		//可能是token存在的问题 waiting
  		this.spinning = true
  		getPropertyList(this.search).then((res)=>{
  			if(res.data.flag == true){
  				if(this.search.pageNo == 1){
	  				this.data = res.data.dataList
	  			}
	  			else{ 
					this.data = this.data.concat(res.data.dataList) 
				}
				this.hasNext = res.data.hasNext
				this.totalNum = res.data.totalRs
  			}
  			this.spinning = false 
  		})
  		.catch((err)=>{
  			this.spinning = false
  		})
  	},
  	nextPage(){
		this.search.pageNo+=1
		this.pageInit()
	},
  	chooseNav(index){
  		this.currentIndex = index
  		this.search.type = index==4 ? '':(index+1)
  		this.search.pageNo = 1 //重置为1
		this.pageInit()
  	}
  },
  components:{
  		breadcrumbs
  }
}
</script>

<style scoped="scoped">
.main{padding:20px 0 46px;width: 1200px;margin:0 auto;}	

/*次级导航*/
.minorNav{line-height:1; font-size: 16px;background-color: #fff;}
.minorNav span{display: inline-block; padding:15px 40px;}
.minorNav span:hover{cursor: pointer;}
.minorNav span.active{background-color: #1E49A5;color:#fff;}

.property_content{padding:30px 0;background:url(../../assets/img/home/property_title.png) no-repeat 0% center  #fff;border-radius: 6px;text-align: center;}
.property_content .inline-title{ height: 120px;padding:0 10px;display: table;}
.property_content .inline-title span{display: table-cell;vertical-align: middle;}

.property_content .gutter-row{padding:30px 0;border-right:2px solid #ddd;}
.line{height: 140px;width: 2px;background-color: #ddd;right:0;top:-37%;}
</style>